{extend name="public/container"}
{block name="content"}
<style type="text/css">
    .order-price span {
        font-size: 12px;
        color: #999;
    }
    .order-price span:not(:last-child) {
        margin-right: 20px;
    }
    .order-price span b {
        color: #FF0000;
        font-size: 17px;
        margin-right: 2px;
    }
</style>
<div id="myApp" v-cloak>
    <div class="douxue-filter padding-10 mb-20" style="margin-bottom:20px">
        <el-form :inline="true" :model="where" size="mini" class="flex">
            <div class="flex flex-between">
                <el-form-item label="">
                    <el-date-picker
                        v-model="where.date_time"
                        type="daterange"
                        align="right"
                        value-format="yyyy-MM-dd"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions">
                    </el-date-picker>
                </el-form-item>
				
                <el-form-item label="">
                    <el-input v-model="where.order_no" placeholder="订单编号"></el-input>
                </el-form-item>

				<el-form-item label="">
					<el-select v-model="where.order_type" clearable placeholder="订单类型">
					    <el-option :label="item.val" :value="item.key" v-for="(item,key) in order_types" :key="key"></el-option>
					</el-select>
				</el-form-item>

                <el-form-item label="">
                    <el-select v-model="where.order_from" clearable placeholder="订单来源">
                        <el-option :label="item.val" :value="item.key" v-for="(item,key) in order_froms" :key="key"></el-option>
                    </el-select>
                </el-form-item>
				
                <el-form-item>
                    <el-input v-model="where.keyword" placeholder="手机号/姓名">
                        <el-button slot="append" size="small" type="success" @click="doLoadRows(1)" icon="el-icon-search"></el-button>
                    </el-input>
                </el-form-item>
            </div>
        </el-form>
    </div>

    <div class="padding-10">
        <el-table
            :data="rows"
            style="width: 100%"
            v-loading="loading"
            element-loading-text="加载中"
            element-loading-spinner="el-icon-loading"
            size="mini">
            <el-table-column
                prop="order_no"
                label="订单编号"
                width="170"
                align="left">
            </el-table-column>
            <el-table-column
                prop="order_amt"
                label="交易流水号"
                width="230"
                align="left">
                <template slot-scope="scope">
                    <e-link :underline="false" v-if="scope.row.out_trade_no" type="success">{{ scope.row.out_trade_no }}</e-link>
                    <e-link :underline="false" v-else type="info">{{ scope.row.out_trade_no }}</e-link>
                </template>
            </el-table-column>
            <el-table-column
                prop="nickname"
                label="用户昵称"
                width="80"
                align="left">
                <template slot-scope="scope">
                    <div style="white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">{{ scope.row.nickname }}</div>
                </template>
            </el-table-column>

            <el-table-column
                prop="mobile"
                label="手机号"
                width="100"
                align="left">
            </el-table-column>

            <el-table-column
                prop="order_amt"
                label="订单金额"
                width="150"
                align="left">
                <template slot-scope="scope">
                    <div class="order-price flex">
                        <span v-if="scope.row.order_amt>0"><b>{{ scope.row.order_amt }}</b>元</span>

                        <span v-if="scope.row.golds>0"><b>{{ scope.row.golds }}</b>金币</span>
                    </div>
                </template>
            </el-table-column>

            <el-table-column
                prop="staus_display"
                label="订单状态"
                width="130"
                align="left">
                <template slot-scope="scope">
                    <template v-if="scope.row.status > 0">
                        <el-link :underline="false" type="success"> {{ scope.row.status_display }}</el-link>

                        <span v-if="scope.row.outer">
                            ({{ scope.row.outer.status_display }})
                        </span>
                    </template>
                    <el-link :underline="false" type="danger" v-else> {{ scope.row.pay_status_display }}</el-link>
                </template>
            </el-table-column>

            <el-table-column
                prop="order_type_display"
                label="订单类型"
                width="100"
                align="left">
            </el-table-column>

            <el-table-column
                prop="order_details"
                label="订单明细"
                width="200"
                align="left">
                <template slot-scope="scope">
                    {{ scope.row.outer.outer_title || '-' }}
                </template>
            </el-table-column>

            <el-table-column
                prop="order_from_display"
                label="订单来源"
                width="100"
                align="left">
            </el-table-column>

            <el-table-column
                prop="order_saler"
                label="所属销售"
                width="100"
                align="left">
                <template slot-scope="scope">
                    <template v-if="scope.row.spread_suid">
                        {{ scope.row.order_saler }}
                        (<el-link :underline="false" type="primary"> {{ scope.row.spread_suid }}</el-link>)
                    </template>
                    <template v-else>-</template>
                </template>
            </el-table-column>

            <el-table-column
                prop="order_spreader"
                label="所属领队"
                width="100"
                align="left">
                <template slot-scope="scope">
                    <template v-if="scope.row.spread_uid">
                        {{ scope.row.order_spreader }}
                        (<el-link :underline="false" type="primary"> {{ scope.row.spread_uid }}</el-link>)
                    </template>
                    <template v-else>-</template>
                </template>
            </el-table-column>

            <!-- <el-table-column
                prop="remark"
                label="备注"
                width="130"
                align="left">
                <template slot-scope="scope">
                    <template v-if="scope.row.remark">
                        <el-tooltip class="item" effect="light" :content="scope.row.remark" placement="bottom-start">
                            <i class="el-icon-tickets"></i>
                        </el-tooltip>
                    </template>
                    <template v-else>-</template>
                </template>
            </el-table-column> -->

            <el-table-column
                prop="create_time"
                label="创建时间"
                width="160"
                align="left">
            </el-table-column>

            <el-table-column
                label="可选操作"
                width="130"
                fixed="right"
                align="left">
                <template slot-scope="scope">
					<template v-if="scope.row.status>0&&scope.row.outer">
                        <!-- 线路预定订单 -->
                        <template v-if="scope.row.order_type==1">
                            <el-link size="mini" :underline="false" type="warning" @click="doConfirmRoute(scope.row.id)" v-if="scope.row.outer.status==1">确认</el-link>
                            <el-link size="mini" :underline="false" type="warning" @click="doRecieveFinal(scope.row.id)" v-if="scope.row.outer.status==5">收尾款</el-link>
                            <span v-if="scope.row.outer.status==0">-</span>
                        </template>

						<!-- 金币兑换订单 -->
						<template v-if="scope.row.order_type==2">
							<el-link size="mini" :underline="false" type="warning" @click="doFahuo(scope.row.id)" v-if="scope.row.outer.status==1">发货</el-link>
							<span v-else>-</span>
						</template>
					</template>
					
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                small
                :hide-on-single-page="true"
                layout="prev, pager, next"
                :total="rowsCount"
                :page-size="where.limit"
                @current-change="doLoadRows">
            </el-pagination>
        </div>
    </div>
	
    <!-- 商城订单确认发货 -->
	<el-dialog title="商品发货" :visible.sync="showFahuo">
	  <el-form :model="fahuoForm" label-width="100px">
			<el-form-item label="商品名称" >
				<el-input v-model="fahuoForm.goods_name" autocomplete="off" :disabled="true"></el-input>
			</el-form-item>
			
			<el-form-item label="兑换数量" >
				<el-input v-model="fahuoForm.nums" autocomplete="off" :disabled="true"></el-input>
			</el-form-item>
			
			<el-form-item label="地址" >
				<el-input v-model="fahuoForm.address_display" autocomplete="off" :disabled="true"></el-input>
			</el-form-item>
			
			<el-form-item label="物流单号" prop="logistic_no">
				<el-input v-model="fahuoForm.logistic_no" autocomplete="off"></el-input>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="showFahuo = false">取 消</el-button>
			<el-button type="primary" @click="confirmFahuo()">确定发货</el-button>
		</div>
	</el-dialog>

    <!-- 线路订单确认行程 -->
    <el-dialog title="确认行程" :visible.sync="showConfirmRoute">
      <el-form :model="routeForm" label-width="100px">
            <el-form-item label="客户姓名" >
                <el-input v-model="routeForm.user_fullname" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="客户电话" >
                <el-input v-model="routeForm.user_mobile" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="线路名称" >
                <el-input v-model="routeForm.route_name" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>

            <el-form-item label="规格明细" >
                <el-input v-model="routeForm.sku_name" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>

            <el-form-item label="行程日期" >
                <el-date-picker
                    v-model="routeForm.date"
                    type="date"
                    value-format="yyyy-MM-dd"
                    :disabled="true"
                >
                </el-date-picker>
            </el-form-item>

            <el-form-item label="出行人数" >
                <el-input type="number"  v-model="routeForm.nums" :disabled="true" autocomplete="off">
                    <template slot="append">人</template>
                </el-input>
            </el-form-item>

            <el-form-item label="双床房" >
                <el-input type="number"  v-model="routeForm.double_room" :disabled="true" autocomplete="off">
                    <template slot="append">间</template>
                </el-input>
            </el-form-item>

            <el-form-item label="大床房" >
                <el-input type="number"  v-model="routeForm.big_room" :disabled="true" autocomplete="off">
                    <template slot="append">间</template>
                </el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="showConfirmRoute = false">取 消</el-button>
            <el-button type="primary" @click="confirmRoute()">确认行程</el-button>
        </div>
    </el-dialog>

    <!-- 线路订单确认收尾款 -->
    <el-dialog title="确认收尾款" :visible.sync="recieveFinalFlag">
      <el-form :model="finalForm" label-width="160px">
            <el-form-item label="应收总额" >
                <el-input v-model="finalForm.order_amt" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="已收定金" >
                <el-input v-model="finalForm.deposit.order_amt" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="定金收款交易号" >
                <el-input v-model="finalForm.deposit.out_trade_no" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="待付尾款" >
                <el-input v-model="finalForm.final.order_amt" autocomplete="off" placeholder="待付尾款金额"></el-input>
            </el-form-item>
            <el-form-item label="尾款收款交易号" >
                <el-input v-model="finalForm.final.out_trade_no"  autocomplete="off" placeholder="微信或支付宝交易流水号"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="recieveFinalFlag = false">取 消</el-button>
            <el-button type="primary" @click="confirmRecieveFinal()">确认已收</el-button>
        </div>
    </el-dialog>
</div>
{/block}
{block name="script"}
<script>
    var my = new Vue({
        el: "#myApp",
        data(){
            return {
                rowsCount: 0,
                rows: [],
                where: {
                    keyword: '',
                    status:'',
                    order_type:'',
                    order_no: '',
                    order_from: '',
                    date_time:'',
                    page:1,
                    limit:pageSize,

                },
				order_types: [],
                order_froms: [],
                pickerOptions: {
                    shortcuts: [
                        {
                            text: '最近一周',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '最近一个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '最近三个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                picker.$emit('pick', [start, end]);
                            }
                        }
                    ]
                },
                loading:false,
				showFahuo: false,
				fahuoForm: {
					id: 0,
					goods_name: '',
					nums: 0,
					address_display: '',
					logistic_no: ''
				},
                showConfirmRoute: false,
                routeForm: {
                    id: 0,
                    route_id: 0,
                    route_name: '',
                    sku_id: 0,
                    sku_name: '',
                    date: '',
                    nums: 0,
                    double_room: 0,
                    big_room: 0,
                    user_fullname: '',
                    user_mobile: '',
                },
                recieveFinalFlag: false,
                finalForm: {
                    order_amt: 0,
                    deposit: {
                        order_amt: 0,
                        out_trade_no: ''
                    },
                    final: {
                        order_amt: 0,
                        out_trade_no: ''
                    }

                }
            }
        },
        methods: {
            doLoadRows (page) {
                this.loading = true
                this.where.page  = page || 1
                axios.get(Url({a:'get_list' , q:this.where}))
                    .then(res => {
                        this.rows = res.data.data
                        this.rowsCount =res.data.count
                        this.loading = false
                    })
            },
			doFahuo (orderId) {
				this.showFahuo = true
				axios.get(Url({c:'finance.order',a:'exchangeOrderInfo' , q:{order_id:orderId}})).then(res => {
				    this.fahuoForm = res.data.data.outer
				}).catch(_ => {
				    this.$message.error('发生错误')
				})
			},
			confirmFahuo() {
				if ( !this.fahuoForm.logistic_no ) {
					return this.$message.error('物流单号必填！')
				}
				this.$confirm('请仔细检查物流单号。确认无误并发货吗?').then(_ => {
				    axios.post(Url({c:'finance.order',a:'confirmExchangeOrderFahuo'}) , this.fahuoForm).then(res => {
						if ( res.data.code === 200 ) {
							this.$message.success('发货成功！2秒后页面自动刷新')
							return setTimeout(function(){
								window.location.reload()
							},2000)
						}
						return this.$message.error(res.data.msg)
				    }).catch(_ => {
				        this.$message.error('操作失败')
				    })
				}).catch(_ => {})
			},
            doConfirmRoute(orderId) {
                this.showConfirmRoute = true
                axios.get(Url({c:'finance.order',a:'routeOrderInfo' , q:{order_id:orderId}})).then(res => {
                    this.routeForm = res.data.data.outer
                }).catch(_ => {
                    this.$message.error('发生错误')
                })
            },
            confirmRoute() {
                if ( !this.routeForm.date ) {
                    return this.$message.error('出行日期必填！')
                }
                if ( !this.routeForm.nums ) {
                    return this.$message.error('出行人数必填！')
                }
                if ( !this.routeForm.double_room && !this.routeForm.big_room ) {
                    return this.$message.error('大床房或双人床有一项必填！')
                }
                this.$confirm('请确认已与客户沟通，确认后不可更改！').then(_ => {
                    axios.post(Url({c:'finance.order',a:'confirmRouteOrder'}) , this.routeForm).then(res => {
                        if ( res.data.code === 200 ) {
                            this.$message.success('操作成功！2秒后页面自动刷新')
                            return setTimeout(function(){
                                window.location.reload()
                            },2000)
                        }
                        return this.$message.error(res.data.msg)
                    }).catch(_ => {
                        this.$message.error('操作失败')
                    })
                }).catch(_ => {})
            }
			,doLoadOrderTypes() {
				axios.get(Url({a:'get_attr' , q:{name:'order_type'}})).then(res => {
				    this.order_types = res.data.data
				}).catch(_ => {
				    this.$message.error('发生错误')
				})
			}
            ,doLoadOrderFroms() {
                axios.get(Url({a:'get_attr' , q:{name:'order_from'}})).then(res => {
                    this.order_froms = res.data.data
                }).catch(_ => {
                    this.$message.error('发生错误')
                })
            }
            ,doRecieveFinal(orderId) {
                axios.get(Url({c:'finance.order',a:'finalInfo' , q:{order_id:orderId}})).then(res => {
                    this.finalForm = res.data.data
                    this.recieveFinalFlag = true
                }).catch(_ => {
                    this.$message.error('发生错误')
                })
            }
            ,confirmRecieveFinal() {
                if ( !this.finalForm.final.out_trade_no )  return this.$message.error('交易流水号必填！')
                if ( this.finalForm.final.order_amt <= 0 )  return this.$message.error('尾款金额不能小于0！')

                this.$confirm('请仔细检查尾款金额和交易流水号。确认无误并提交吗?').then(_ => {
                    let _loading = this.$loading({
                        lock: true,
                        text: '处理中...',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });

                    axios.post(Url({c:'finance.order',a:'confirmFinalInfo'}) , this.finalForm).then(res => {
                        if ( res.data.code === 200 ) {
                            this.$message.success('确认成功！2秒后页面自动刷新')
                            return setTimeout(function(){
                                window.location.reload()
                            },2000)
                        }

                        _loading.close()
                        return this.$message.error(res.data.msg)
                    }).catch(_ => {
                        _loading.close()
                        this.$message.error('操作失败')
                    })
                }).catch(_ => {})
            }
        },
        mounted(){
            this.doLoadRows()
			this.doLoadOrderTypes()
            this.doLoadOrderFroms()
        }
    })
</script>
{/block}